<template>
  <div class="userdata">
    <div>
      <van-nav-bar
        :title="'个人资料'"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <div class="userdata_head">
      <img :src="avatar" alt="" />
    </div>
    <div>
      <van-cell-group>
        <van-field label="昵称" v-model="username" readonly />
        <van-field label="性别" v-model="gender" readonly />
        <van-field label="手机号" v-model="phone" readonly />
        <van-field label="生日" v-model="birthday" readonly />
      </van-cell-group>
    </div>
    <div style="margin: 16px">
      <van-button block size="large" color="#eb1f69" @click="loginOut">
        注销
      </van-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import { getLocal, clearLocal } from "../utils/utils";
import { onBeforeMount } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  setup() {
    const router = useRouter();
    const state = reactive({
      username: "",
      gender: "",
      phone: "",
      birthday: "",
      avatar: "",
    });
    //返回mine页面
    const onClickLeft = () => history.back();

    //初始化数据
    const initData = () => {
      // console.log(JSON.parse(getLocal('userinfo')));
      const userInfo = JSON.parse(getLocal("userinfo"));
      state.username = userInfo.uname;
      state.gender = userInfo.gender == 1 ? "男" : "女";
      state.phone = userInfo.phone;
      state.birthday = userInfo.birthday;
      state.avatar = require(`../assets/image/avator/${userInfo.avatar}`);
    };
    const loginOut = () => {
      clearLocal();
      Toast.success("您已退出登录");
      setTimeout(() => {
        router.push("/mine");
      }, 1000);
    };
    onBeforeMount(() => {
      initData();
    });
    return {
      ...toRefs(state),
      initData,
      onClickLeft,
      loginOut,
    };
  },
};
</script>

<style lang = "less" scoped>
.userdata {
  .userdata_head {
    text-align: center;
    margin: 30px 0;
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
}
</style>